<script setup>
import request9191 from "../../utils/request9191.js";

//每一秒执行
import {ref} from "vue";
//获取当前时间
const date = ref()
setInterval(() => {
  date.value = new Date().toLocaleString()
}, 800)
//设备信息
const deviceInfo = ref({
  name: "设备名称",
  ip: "192.168.1.1",
  mac: "00:00:00:00:00:00"
})
//获取设备信息
const getDeviceInfo =() => {
  request9191({
    url:'/device/getDeviceInfo',
    method:'get',
  }).then((res)=>{
    deviceInfo.value.name = res.data.data.deviceName
    deviceInfo.value.ip = res.data.data.deviceIp
    deviceInfo.value.mac = res.data.data.deviceMAC
  })
}
getDeviceInfo()
</script>

<template>
  <div class="mystartAll">
    <el-card style="height: 260px;width: 100%;margin-bottom: 20px;">
      <div class="mystartAll_Content">
        <div class="mystartAll_left_content">
          <span style="font-size: large;font-weight: bold">哈喽,团长！开始一天的工作吧！</span>
          <p>当前时间: {{ date }}</p>
          <p>今日天气: 晴 , 🌤,湿度: 60% , 温度: 25℃</p>
        </div>
        <img src="../../assets/welcome/11.jpg" height="260" width="400"/>
      </div>
    </el-card>
    <el-card>
      <div class="card2" style="display: flex;justify-content: space-between;">
        <div class="mydeviceInfo">
          <h3>当前设备名称:<el-tag type="success" class="mydevicetag">{{deviceInfo.name}}</el-tag></h3>
          <h3>设备IP地址:<el-tag type="success" class="mydevicetag">{{deviceInfo.ip}}</el-tag></h3>
          <h3>设备MAC地址:<el-tag type="success" class="mydevicetag">{{deviceInfo.mac}}</el-tag></h3>
        </div>
        <div class="mydeviceInfo"></div>
      </div>
    </el-card>
  </div>
</template>

<style scoped>
.mystartAll_Content {
  display: flex;
  justify-content: space-between;
}

.mystartAll_left_content {
  margin-top: 30px;
}

.mydeviceInfo {
  padding-left: 20px;
  width: 530px;
  height:200px;
  background-color: #91d5ff;
  border-radius: 20px;
}

.mydevicetag{
  margin-left: 10px;
  font-size:20px;
}
</style>
